<template>
  <div class="tab">
    <cube-tab-bar
      :showSlider=true
      v-model="selectedLabel"
      :data="tabs"
      ref="tabBar"
      class="border-bottom-1px">
    </cube-tab-bar>
    <div class="slide-wrapper">
      <!-- :initial-index 初始化时展示的位置索引值，默认为 0。 show-dots 是否显示轮播指示点 -->
      <cube-slide 
        ref="slide"
        :loop=false
        :auto-play=false
        :show-dots=false
        :initial-index="index"
        :options="options"
        @change="changePage"
        @scroll="onScroll"
      >
        <cube-slide-item v-for="(item, index) in tabs" :key="index"> 
          <!-- 内置组件  渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。 -->
          <component :is="item.component" :data="item.data" ref="component"></component>
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tab',
    props: {
      tabs: {
        type: Array,
        default() {
          return []
        }
      },
      // 控制tab 组件默认的选中项
      initialIndex: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        index: this.initialIndex,
        // tabs: [{
        //   label: '商品',
        // }, {
        //   label: '评价',
        // }, {
        //   label: '商家',
        // }],
        // 要想scroll 事件有效果需要配置 options
        options: {
          listenScroll: true,
          probeType: 3,
          directionLockThreshold: 0
        }
      }
    },
    computed: {
      // 侦听属性
      selectedLabel: {
        get() {
          return this.tabs[this.index].label
        },
        set(newVal) {
          // newVal是指向tab 栏选中的值
          // findIndex 类型化数组中寻找质数元素的下标（如果没有质数则返回 -1）.
          this.index = this.tabs.findIndex((value)=>{
            console.log(value.label === newVal)
            return value.label === newVal
          })
        }
      }
    },
    created() {

    },
    // !!!!!!!!!重点!!!!!!!!!!!!!
    mounted() {
      // 在页面没进来时，是不会加载滑动的onchange 事件，所以要页面挂载时 主动调用一次onchange事件
      this.changePage(this.index)
    },
    methods: {
      changePage(current) {
        // selectedLabel 是tab栏的默认值 实现滚动轮播tab 栏跟着联动
        this.index = current;
        const component = this.$refs.component[current]
        // 利用 ref 获取当前组件的所有值 判断fetch 在不在就可以了，不需要加括号fetch()， 这样时表示调用了
        component.fetch ?component.fetch():'';
      },
      // 要想scroll 滚动有数据，得配置options
      onScroll(pos) {
        const tabBarWidth = this.$refs.tabBar.$el.clientWidth //this.$refs.tabBar.$el 就是tabBar 的整个dom 元素
        const slideWidth = this.$refs.slide.slide.scrollerWidth  // slide 是一个组件，所以this.$refs.slide 获取的是组件上挂载的所有参数
        // console.log(tabBarWidth,slideWidth) // tabBarWidth 获取的是设备tab栏的宽度
        const transform = -pos.x/slideWidth*tabBarWidth
        this.$refs.tabBar.setSliderTransform(transform)
      }
    },
  }
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  .tab
    display: flex
    flex-direction: column
    height: 100%
    // >>> 可以修改组件原来的样式
    >>> .cube-tab
      padding: 10px 0
    .slide-wrapper
      flex: 1
      overflow: hidden

</style>